<template>
  <div class="main-container custom-el-plus">
    <div class="top-box">
      <TransitionGroup
        name="carditemlist"
        :css="false"
        @before-enter="onBeforeEnter"
        @enter="onEnter"
      >
        <div
          class="card-item"
          v-for="(item, index) in state.cardList"
          :key="item"
        >
          <div class="card" :style="{ background: item.cardBackground }">
            <div class="card-left">
              <div class="card-label">{{ item.cardName }}</div>
              <div class="card-num-box">
                <span class="card-num">{{
                  item.cardNum?.toLocaleString()
                }}</span>
                <span class="card-unit">个</span>
              </div>
            </div>
            <div class="card-icon">
              <img :src="item.cardIcon" alt="" />
            </div>
          </div>
          <div class="split-line" v-if="index == 0"></div>
        </div>
      </TransitionGroup>
    </div>
    <div class="bottom-box">
      <div class="bottom-inner-box">
        <div class="not-reviewed">
          <div class="head-box">
            <div class="head-icon"></div>
            <span class="head-title">未审核设备</span>
            <el-button
              type="primary"
              style="margin-left: auto"
              @click="searchNotReviewedDevice"
              >刷新</el-button
            >
          </div>
          <div class="not-reviewed-table-box">
            <el-table
              :data="state.notReviewedList"
              style="width: 100%"
              class="style-table"
            >
              <el-table-column
                prop="deviceId"
                label="设备ID"
                width="200"
                show-overflow-tooltip
              />
              <el-table-column prop="deviceTypeName" label="设备类型">
                <template #default="props">
                  <div class="status-box">
                    <span v-if="!props.row.editFlag">{{
                      props.row.deviceTypeName
                    }}</span>
                    <div v-else>
                      <el-select
                        v-model="props.row.deviceType"
                        placeholder="全部"
                        style="width: 7.8vw"
                        popper-class="custom-query-select"
                      >
                        <el-option
                          v-for="item in state.deviceTypeList"
                          :key="item"
                          :label="item.name"
                          :value="item.code"
                        />
                      </el-select>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="address"
                label="设备位置"
                width="250"
                show-overflow-tooltip=""
              >
                <template #default="props">
                  <span v-if="!props.row.editFlag">{{
                    props.row.address
                  }}</span>
                  <el-input
                    v-else
                    v-model="props.row.address"
                    maxlength="20"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="directionName" label="设备方向">
                <template #default="props">
                  <div class="status-box">
                    <span v-if="!props.row.editFlag">{{
                      props.row.directionName
                    }}</span>
                    <div v-else>
                      <el-select
                        v-model="props.row.direction"
                        placeholder="全部"
                        style="width: 5.2vw"
                        popper-class="custom-query-select"
                      >
                        <el-option
                          v-for="item in state.directionList"
                          :key="item"
                          :label="item.name"
                          :value="item.code"
                        />
                      </el-select>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="relationDevice" label="关联设备" />
              <el-table-column prop="deviceLogLat" label="设备坐标" width="300">
                <template #default="props">
                  <span v-if="!props.row.editFlag">{{
                    props.row.longitude + ", " + props.row.latitude
                  }}</span>
                  <div v-else class="select-btn-box">
                    <span>{{
                      props.row.longitude + ", " + props.row.latitude
                    }}</span>
                    <span class="select-btn" @click="openMap(props.row)"
                      >地图选点</span
                    >
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="onlineStatus" label="设备状态">
                <template #default="props">
                  <div class="status-box">
                    <div
                      v-if="props.row.onlineStatus"
                      class="online-icon"
                    ></div>
                    <div v-else class="outline-icon"></div>
                    <span>{{ props.row.onlineStatus ? "在线" : "离线" }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="communicationTime"
                label="通讯时间"
                show-overflow-tooltip
              />
              <el-table-column label="操作" width="200">
                <template #default="scope">
                  <div class="btn-box">
                    <el-button
                      class="btn-edit"
                      text
                      size="small"
                      v-if="!scope.row.editFlag"
                      :disabled="state.isHasEdit"
                      @click="showEditItem(scope.row)"
                      >编辑</el-button
                    >
                    <div v-else>
                      <el-button
                        text
                        size="small"
                        class="btn-save"
                        @click="saveDeviceInfo(scope.row)"
                        >保存</el-button
                      >
                      <el-button
                        text
                        size="small"
                        class="btn-cancle"
                        @click="cancleSave(scope.row)"
                        >取消</el-button
                      >
                    </div>
                    <el-button
                      text
                      size="small"
                      class="btn-review"
                      :disabled="state.isHasEdit"
                      @click="reviewedConfirm(scope.row)"
                      >完成审核</el-button
                    >
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="page-box">
            <el-pagination
              style="margin-left: auto"
              v-model:current-page="state.currentPage"
              :small="small"
              :background="true"
              layout="total, prev, pager, next"
              :total="state.notReviewedTotalNum"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
        <div class="have-reviewed">
          <div class="head-box">
            <div class="head-icon"></div>
            <span class="head-title">已审核设备</span>
            <div class="device-box">
              <span class="device-label">设备类型</span>
              <div class="device-select-box">
                <el-select
                  v-model="state.deviceType"
                  placeholder="全部"
                  clearable
                  :value-on-clear="null"
                  style="width: 9.36vw"
                  popper-class="custom-query-select"
                >
                  <el-option
                    v-for="item in state.deviceTypeList"
                    :key="item"
                    :label="item.name"
                    :value="item.code"
                  />
                </el-select>
              </div>
            </div>
            <div class="device-status-box">
              <span class="device-label">设备状态</span>
              <div class="device-select-box">
                <el-select
                  v-model="state.deviceStatu"
                  placeholder="全部"
                  clearable
                  style="width: 8.32vw"
                  :value-on-clear="null"
                  popper-class="custom-query-select"
                >
                  <el-option
                    v-for="item in state.deviceStatusList"
                    :key="item"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </div>
            </div>
            <el-button
              type="primary"
              style="margin-left: 1.664vw"
              @click="searchReviewedDevice"
              >搜索</el-button
            >
          </div>
          <div class="have-reviewed-table-box">
            <el-table
              :data="state.haveReviewedList"
              style="width: 100%"
              class="style-table"
            >
              <el-table-column
                prop="deviceId"
                label="设备ID"
                width="200"
                show-overflow-tooltip
              />
              <el-table-column
                prop="deviceTypeName"
                label="设备类型"
                width="200"
              >
                <template #default="props">
                  <div class="status-box">
                    <span v-if="!props.row.editFlag">{{
                      props.row.deviceTypeName
                    }}</span>
                    <div v-else>
                      <el-select
                        v-model="props.row.deviceType"
                        placeholder="全部"
                        style="width: 7.8vw"
                        popper-class="custom-query-select"
                      >
                        <el-option
                          v-for="item in state.deviceTypeList"
                          :key="item"
                          :label="item.name"
                          :value="item.code"
                        />
                      </el-select>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="address"
                label="设备位置"
                width="220"
                show-overflow-tooltip=""
              >
                <template #default="props">
                  <span v-if="!props.row.editFlag">{{
                    props.row.address
                  }}</span>
                  <el-input
                    v-else
                    v-model="props.row.address"
                    maxlength="20"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="directionName" label="设备方向">
                <template #default="props">
                  <div class="status-box">
                    <span v-if="!props.row.editFlag">{{
                      props.row.directionName
                    }}</span>
                    <div v-else>
                      <el-select
                        v-model="props.row.direction"
                        placeholder="全部"
                        style="width: 5.2vw"
                        popper-class="custom-query-select"
                      >
                        <el-option
                          v-for="item in state.directionList"
                          :key="item"
                          :label="item.name"
                          :value="item.code"
                        />
                      </el-select>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="relationDevice" label="关联设备" />
              <el-table-column prop="deviceLogLat" label="设备坐标" width="260">
                <template #default="props">
                  <span v-if="!props.row.editFlag">{{
                    props.row.longitude + ", " + props.row.latitude
                  }}</span>
                  <div v-else class="select-btn-box">
                    <span>{{
                      props.row.longitude + ", " + props.row.latitude
                    }}</span>
                    <span class="select-btn" @click="openMap(props.row)"
                      >地图选点</span
                    >
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="cron" label="抽帧频次" width="120">
                <template #default="props">
                  <span>
                    {{
                      props.row.frameStatus
                        ? getFrency(props.row.cron)
                        : "未启用"
                    }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="onlineStatus" label="设备状态" width="120">
                <template #default="props">
                  <div class="status-box">
                    <div
                      v-if="props.row.onlineStatus"
                      class="online-icon"
                    ></div>
                    <div v-else class="outline-icon"></div>
                    <span>{{ props.row.onlineStatus ? "在线" : "离线" }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="communicationTime"
                label="通讯时间"
                show-overflow-tooltip
              />
              <el-table-column label="操作" width="150">
                <template #default="scope">
                  <div class="btn-box">
                    <el-button
                      class="btn-edit"
                      text
                      size="small"
                      v-if="!scope.row.editFlag"
                      :disabled="state.isHasEdit"
                      @click="showEditItem(scope.row)"
                      >编辑</el-button
                    >
                    <div v-else>
                      <el-button
                        text
                        size="small"
                        class="btn-save"
                        @click="saveReviewedDeviceInfo(scope.row)"
                        >保存</el-button
                      >
                      <el-button
                        text
                        size="small"
                        class="btn-cancle"
                        @click="cancleSave(scope.row)"
                        >取消</el-button
                      >
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="page-box">
            <el-pagination
              style="margin-left: auto"
              v-model:current-page="state.currentPassPage"
              :small="small"
              :background="true"
              layout="total, prev, pager, next"
              :total="state.haveReviewedTotalNum"
              @current-change="handleReviewedCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      v-model="state.mapDialogVisible"
      width="auto"
      destroy-on-close
      align-center
      title="地图选点"
    >
      <div class="pic-dialog">
        <div class="img-content">
          <div class="map-container" id="devicePositionMap"></div>
          <div class="btn-group">
            <el-button @click="cancelSelect">取消</el-button>
            <el-button type="primary" @click="submitLatLog">确定</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { getCurrentInstance, onMounted, reactive, h, nextTick } from "vue";
import gsap from "gsap";
// 引入请求方法
import MapInit from "@/utils/mineMap/MapInit";
const { proxy } = getCurrentInstance();
// 引入图片
import totalDevice from "@/assets/img/config/totalDevice.png";
import passDevice from "@/assets/img/config/passDevice.png";
import onlineDevice from "@/assets/img/config/onlineDevice.png";
import enableDevice from "@/assets/img/config/enableDevice.png";
import MapMarker from "@/utils/mineMap/mapMarker.js";
import { cronMapList } from "@/utils/constMapList.js";
import { ElMessage, ElMessageBox } from "element-plus";

const state = reactive({
  cardList: [
    {
      cardName: "设备总数",
      cardId: 1,
      cardNum: null,
      cardIcon: totalDevice,
      cardBackground: "linear-gradient( 270deg, #1E1D4E 0%, #253D7A 100%)",
    },
    {
      cardName: "已审核设备总数",
      cardId: 2,
      cardNum: null,
      cardIcon: passDevice,
      cardBackground: "#152241",
    },
    {
      cardName: "已审核设备在线数",
      cardId: 3,
      cardNum: null,
      cardIcon: onlineDevice,
      cardBackground: "#152241",
    },
    {
      cardName: "已审核设备启用数",
      cardId: 4,
      cardNum: null,
      cardIcon: enableDevice,
      cardBackground: "#152241",
    },
  ],
  deviceTypeList: [],
  directionList: [],
  deviceType: null,
  deviceStatusList: [
    {
      name: "在线",
      value: 1,
    },
    {
      name: "离线",
      value: 0,
    },
  ],
  deviceStatu: null,
  currentPage: 1,
  currentPassPage: 1,
  mapDialogVisible: false,
  notReviewedList: [],
  notReviewedTotalNum: 0,
  haveReviewedList: [],
  haveReviewedTotalNum: 0,
  isHasEdit: false,
});
const mapObject = {
  darkMapObj: null,
  deviceMarker: null,
  clickLat: null,
  clicklog: null,
  row: null,
};
//======================================事件方法===============================
const searchNotReviewedDevice = () => {
  state.currentPage = 1;
  state.isHasEdit = false;
  state.haveReviewedList.map((item) => {
    item.editFlag = false;
  });
  getDeviceList({
    pageNum: state.currentPage,
  }).then((res) => {
    state.notReviewedList = res.list;
    state.notReviewedTotalNum = res.total;
  });
};
const searchReviewedDevice = () => {
  state.isHasEdit = false;
  state.currentPassPage = 1;
  state.notReviewedList.map((item) => {
    item.editFlag = false;
  });
  getDeviceList({
    reviewStatus: 1,
    deviceType: state.deviceType,
    onlineStatus: state.deviceStatu,
    pageNum: state.currentPassPage,
  }).then((res) => {
    state.haveReviewedList = res.list;
    state.haveReviewedTotalNum = res.total;
  });
};
const handleCurrentChange = () => {
  state.isHasEdit = false;
  state.haveReviewedList.map((item) => {
    item.editFlag = false;
  });
  getDeviceList({
    pageNum: state.currentPage,
  }).then((res) => {
    state.notReviewedList = res.list;
    state.notReviewedTotalNum = res.total;
  });
};
const handleReviewedCurrentChange = () => {
  state.isHasEdit = false;
  state.notReviewedList.map((item) => {
    item.editFlag = false;
  });
  getDeviceList({
    reviewStatus: 1,
    deviceType: state.deviceType,
    onlineStatus: state.deviceStatu,
    pageNum: state.currentPassPage,
  }).then((res) => {
    state.haveReviewedList = res.list;
    state.haveReviewedTotalNum = res.total;
  });
};
const showEditItem = (row) => {
  state.isHasEdit = true;
  row.editFlag = !row.editFlag;
};
const saveDeviceInfo = (row) => {
  //先校验数据
  let param = {
    pkId: row.pkId,
    deviceType: row.deviceType,
    longitude: row.longitude,
    latitude: row.latitude,
    direction: row.direction,
    address: row.address,
  };
  if (!param.address) {
    ElMessage({
      message: "设备位置不为空",
      type: "warning",
    });
    return;
  }
  if (isAllWhitespace(param.address)) {
    ElMessage({
      message: "设备位置不能全为空格",
      type: "warning",
      duration: 2000,
    });
    return;
  }
  if (!row.longitude || !row.latitude) {
    ElMessage({
      message: "请选择设备坐标",
      type: "warning",
      duration: 2000,
    });
    return;
  }
  updateDeviceInfo(param)
    .then((res) => {
      ElMessage({
        message: "编辑成功",
        type: "success",
        duration: 2000,
      });
      getDeviceList({
        pageNum: state.currentPage,
      }).then((res) => {
        state.notReviewedList = res.list;
        state.notReviewedTotalNum = res.total;
        state.isHasEdit = false;
        row.editFlag = !row.editFlag;
      });
    })
    .catch((res) => {
      ElMessage({
        message: "编辑失败",
        type: "error",
        duration: 3000,
      });
    });
};
const saveReviewedDeviceInfo = (row) => {
  //先校验数据
  let param = {
    pkId: row.pkId,
    deviceType: row.deviceType,
    longitude: row.longitude,
    latitude: row.latitude,
    direction: row.direction,
    address: row.address,
  };
  if (!param.address) {
    ElMessage({
      message: "设备位置不为空",
      type: "warning",
    });
    return;
  }
  if (isAllWhitespace(param.address)) {
    ElMessage({
      message: "设备位置不能全为空格",
      type: "warning",
      duration: 2000,
    });
    return;
  }
  if (!row.longitude || !row.latitude) {
    ElMessage({
      message: "请选择设备坐标",
      type: "warning",
      duration: 2000,
    });
    return;
  }
  updateDeviceInfo(param)
    .then((res) => {
      ElMessage({
        message: "编辑成功",
        type: "success",
        duration: 2000,
      });
      getDeviceList({
        reviewStatus: 1,
        deviceType: state.deviceType,
        onlineStatus: state.deviceStatu,
        pageNum: state.currentPassPage,
      }).then((res) => {
        state.haveReviewedList = res.list;
        state.haveReviewedTotalNum = res.total;
        state.isHasEdit = false;
        row.editFlag = !row.editFlag;
      });
    })
    .catch((res) => {
      ElMessage({
        message: "编辑失败",
        type: "error",
        duration: 3000,
      });
    });
};
const cancleSave = (row) => {
  state.isHasEdit = false;
  row.editFlag = !row.editFlag;
};
const reviewedConfirm = (row) => {
  ElMessageBox({
    title: "",
    cancelButtonClass: "messagebox-cancel-btn",
    confirmButtonClass: "messagebox-confirm-btn",
    customStyle: {
      backgroundColor: "#0D172F",
      borderRadius: "8px",
    },
    message: h("p", null, [
      h(
        "div",
        { style: "color: #A5ADBA; margin: 2.781vh 0 3.708vh 0.624vw" },
        "确认完成此设备审核?"
      ),
    ]),
    showCancelButton: true,
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    beforeClose: (action, instance, done) => {
      if (action === "confirm") {
        instance.confirmButtonLoading = true;
        instance.confirmButtonText = "loading...";
        updateDeviceInfo({
          reviewStatus: 1,
          pkId: row.pkId,
        }).then((res) => {
          done();
          instance.confirmButtonLoading = false;
          state.isHasEdit = false;
          getDeviceList({
            pageNum: state.currentPage,
          }).then((res) => {
            state.notReviewedList = res.list;
            state.notReviewedTotalNum = res.total;
          });
          getDeviceList({
            reviewStatus: 1,
            deviceType: state.deviceType,
            onlineStatus: state.deviceStatu,
            pageNum: state.currentPassPage,
          }).then((res) => {
            state.haveReviewedList = res.list;
            state.haveReviewedTotalNum = res.total;
          });
        });
      } else {
        done();
      }
    },
  }).then((action) => {
    ElMessage({
      type: "success",
      message: `审核成功`,
      duration: 2000,
    });
  });
};
const onEnter = (el, done) => {
  gsap.to(el, {
    opacity: 1,
    transform: "translate(0px, 0px) scale(1)",
    delay: el.dataset.index * 0.2,
    onComplete: done,
  });
};
const onBeforeEnter = (el) => {
  el.style.opacity = 0;
  el.style.transform = "translate(-1000px, -1000px) scale(0)"; // 从左上角出现
};
const openMap = (row) => {
  state.mapDialogVisible = true;
  nextTick(() => {
    mapObject.clickLat = row.latitude;
    mapObject.clicklog = row.longitude;
    mapObject.row = row;
    initMap(row.latitude, row.longitude).then(() => {
      addDeviceMarker(row.latitude, row.longitude);
    });
  });
};
const cancelSelect = () => {
  state.mapDialogVisible = false;
};
const submitLatLog = () => {
  state.mapDialogVisible = false;
  mapObject.row.latitude = Math.round(mapObject.clickLat * 1000000) / 1000000;
  mapObject.row.longitude = Math.round(mapObject.clicklog * 1000000) / 1000000;
};
//======================================自定义方法===============================
const isAllWhitespace = (str) => {
  return /^\s*$/.test(str);
};
//初始化地图
const initMap = (lat = 40.76546125305629, log = 114.88923193324109) => {
  return new Promise((resolve, reject) => {
    mapObject.darkMapObj = new MapInit("devicePositionMap", {
      center: [log, lat],
      pitch: 0,
      zoom: 16,
    });
    mapObject.darkMapObj.on("click", (evt) => {
      removeMarker();
      addDeviceMarker(evt.lngLat.lat, evt.lngLat.lng);
      mapObject.clickLat = evt.lngLat.lat;
      mapObject.clicklog = evt.lngLat.lng;
    });
    let time = setInterval(() => {
      if (mapObject.darkMapObj && mapObject.darkMapObj.isStyleLoaded()) {
        clearInterval(time);
        resolve();
      }
    }, 100);
  });
};
//添加位置点标记
const addDeviceMarker = (lat, log) => {
  if (!lat || !log) {
    ElMessage({
      message: "点坐标错误,请重新选择",
      type: "warning",
      duration: 3000,
    });
    return;
  }
  mapObject.deviceMarker = new MapMarker(mapObject.darkMapObj, {
    lnglat: [log, lat],
    pkId: "",
    properties: {},
    width: "40px",
    height: "46px",
    url: "url(/ivam/mapPin.png)",
  });
};
//删除点标记
const removeMarker = () => {
  if (mapObject.deviceMarker) {
    mapObject.deviceMarker.remove();
    mapObject.deviceMarker = null;
  }
};
const getFrency = (cron) => {
  return (
    cronMapList.find((item) => {
      return item.value == cron;
    })?.name || ""
  );
};
//======================================接口方法==================================
const updateDeviceInfo = async (param) => {
  const res = await proxy.$http.postWithBody("device/update", param);
  if (res == 0) {
    throw res;
  }
  return res;
};
const getDirectionList = async () => {
  const res = await proxy.$http.getFun("device/direction");
  if (JSON.stringify(res) == "{}") {
    throw res;
  }
  return res;
};
const getDeviceTypeList = async () => {
  const res = await proxy.$http.getFun("device/type");
  if (JSON.stringify(res) == "{}") {
    throw res;
  }
  return res;
};
const getDeviceCount = async () => {
  const res = await proxy.$http.getFun("device/count");
  if (JSON.stringify(res) == "{}") {
    throw res;
  }
  return res;
};
const getDeviceList = async (param) => {
  const res = await proxy.$http.postWithBody(
    "device/query",
    Object.assign(
      {
        reviewStatus: 0,
        deviceType: null,
        onlineStatus: null,
        pageNum: 1,
        pageSize: 10,
      },
      param
    )
  );
  if (JSON.stringify(res) == "{}") {
    throw res;
  }
  return res;
};

//======================================钩子函数==================================
onMounted(() => {
  getDirectionList().then((res) => {
    state.directionList = res;
  });
  getDeviceTypeList().then((res) => {
    state.deviceTypeList = res;
  });
  getDeviceCount().then((res) => {
    state.cardList.forEach((item) => {
      switch (item.cardId) {
        case 1:
          item.cardNum = res.total;
          break;
        case 2:
          item.cardNum = res.auditCount;
          break;
        case 3:
          item.cardNum = res.auditOnlineCount;
          break;
        case 4:
          item.cardNum = res.auditEnableCount;
          break;
        default:
          break;
      }
    });
  });
  getDeviceList().then((res) => {
    state.notReviewedList = res.list;
    state.notReviewedTotalNum = res.total;
  });
  getDeviceList({
    reviewStatus: 1,
  }).then((res) => {
    state.haveReviewedList = res.list;
    state.haveReviewedTotalNum = res.total;
  });
});
</script>
  
<style scoped lang="scss">
.main-container {
  background-color: #000102;
  padding: 0 !important;
  :deep(.el-select) {
    .el-select__wrapper {
      width: 100%;
    }
  }
  & > .top-box {
    margin: pxTvh(24) pxTvw(24) 0 pxTvw(24);
    height: pxTvh(150);
    width: pxTvw(1872);
    background: #0d172f;
    border-radius: 4px;
    @include elasticFN(space-around, center);
    & > .card-item:last-child {
      margin-right: pxTvw(16);
    }
    & > .card-item {
      margin-left: pxTvw(16);
      @include elasticFN(center, center);
      .card {
        width: pxTvw(444);
        height: pxTvh(118);
        border-radius: 8px;
        @include elasticFN(space-between, center);
        & > .card-icon {
          width: pxTvw(56);
          height: pxTvw(56);
          margin-right: pxTvw(48);
          & > img {
            width: 100%;
            height: 100%;
          }
        }
        & > .card-left {
          margin-left: pxTvw(32);
          & > .card-label {
            font-family: PingFang SC, PingFang SC, sans-serif;
            font-weight: 400;
            @include computed_font(14);
            color: #bed3e6;
          }
          & > .card-num-box {
            margin-top: pxTvh(16);
            & > .card-num {
              font-family: DIN Alternate, DIN Alternate, sans-serif;
              font-weight: bold;
              @include computed_font(32);
              color: #ffffff;
            }
            & > .card-unit {
              font-family: PingFang SC, PingFang SC, sans-serif;
              font-weight: 400;
              @include computed_font(14);
              margin-left: pxTvw(8);
              color: #bed3e6;
            }
          }
        }
      }
      .split-line {
        width: 0;
        height: pxTvh(100);
        margin-left: pxTvw(16);
        border-left: 1px dashed #abc7ff;
        opacity: 0.3;
      }
    }
  }
  & > .bottom-box {
    :deep(.el-input) {
      .el-input__inner {
        height: calc(pxTvh(32) - 2px) !important;
        line-height: calc(pxTvh(32) - 2px) !important;
      }
    }
    margin: pxTvh(24) pxTvw(12) 0 pxTvw(12);
    height: calc(100% - #{pxTvh(198)});
    & > .bottom-inner-box {
      margin: 0 auto pxTvh(24) auto;
      overflow-y: auto;
      width: pxTvw(1872);
      height: pxTvh(805);
      background: #0d172f;
      border-radius: 4px;
      & > .not-reviewed {
        margin: 0 pxTvw(16);
        padding-top: pxTvh(16);
        & > .head-box {
          height: pxTvh(32);
          @include elasticFN(flex-start, center);
          & > .head-icon {
            width: 4px;
            height: 13px;
            background: #3174ff;
          }
          & > .head-title {
            font-family: PingFang SC, PingFang SC, sans-serif;
            font-weight: 500;
            @include computed_font(16);
            color: #e8f1ff;
            margin-left: pxTvw(12);
          }
          .el-button {
            height: pxTvh(36);
          }
        }
        & > .not-reviewed-table-box {
          margin-top: pxTvh(16);
          :deep(.el-select) {
            .el-select__wrapper {
              min-height: pxTvh(32);
            }
          }
          background: transparent;
          & > .style-table {
            background-color: transparent !important;
            width: 100%;
            .btn-box {
              color: #377dff;
              @include elasticFN(flex-start, center);
              @include computed_font(14);
              & > .btn-edit {
                padding: 0;
              }
              & > .btn-edit:hover {
                background: transparent;
                opacity: 0.5;
              }
              .btn-save {
                padding: 0;
              }
              .btn-cancle,
              .btn-review {
                padding: 0;
                margin-left: pxTvw(16);
              }

              .btn-save:hover,
              .btn-cancle:hover,
              .btn-review:hover {
                opacity: 0.5;
                background: transparent;
              }
            }
          }
        }
        & > .page-box {
          margin-top: pxTvh(16);
        }
      }
      & > .have-reviewed {
        margin: pxTvw(24) pxTvw(16) 0 pxTvw(16);
        padding-bottom: pxTvh(16);
        & > .head-box {
          height: pxTvh(32);
          @include elasticFN(flex-start, center);
          & > .head-icon {
            width: 4px;
            height: 13px;
            background: #3174ff;
          }
          & > .head-title {
            font-family: PingFang SC, PingFang SC, sans-serif;
            font-weight: 500;
            @include computed_font(16);
            color: #e8f1ff;
            margin-left: pxTvw(12);
          }
          .el-button {
            height: pxTvh(36);
          }
          & > .device-box {
            @include elasticFN(flex-start, center);
            margin-left: auto;
            & > .device-label {
              font-family: PingFang SC, PingFang SC, sans-serif;
              font-weight: 400;
              @include computed_font(14);
              color: #bed3e6;
            }
            & > .device-select-box {
              margin-left: pxTvw(16);
              ::v-deep .el-select .el-select__wrapper {
                width: 100%;
              }
            }
          }
          & > .device-status-box {
            @include elasticFN(flex-start, center);
            margin-left: pxTvw(24);
            & > .device-label {
              font-family: PingFang SC, PingFang SC, sans-serif;
              font-weight: 400;
              @include computed_font(14);
              color: #bed3e6;
            }
            & > .device-select-box {
              margin-left: pxTvw(16);
            }
          }
        }
        & > .have-reviewed-table-box {
          :deep(.el-select) {
            .el-select__wrapper {
              min-height: pxTvh(32);
            }
          }
          margin-top: pxTvh(16);
          background: transparent;
          & > .style-table {
            background-color: transparent !important;
            width: 100%;
            .btn-box {
              color: #377dff;
              @include elasticFN(flex-start, center);
              & > .btn-edit {
                padding: 0;
              }
              & > .btn-edit:hover {
                background: transparent;
                opacity: 0.5;
              }
              .btn-save {
                padding: 0;
              }
              .btn-cancle,
              .btn-review {
                padding: 0;
                margin-left: pxTvw(16);
              }

              .btn-save:hover,
              .btn-cancle:hover,
              .btn-review:hover {
                opacity: 0.5;
                background: transparent;
              }
            }
          }
          .style-table {
            background-color: transparent !important;
            width: 100%;
          }
        }
        & > .page-box {
          margin-top: pxTvh(16);
        }
      }
    }
  }
  & > .bottom-box::-webkit-scrollbar-thumb {
    background: #20325d;
  }
  .pic-dialog {
    // width: pxTvw(400);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    .img-content {
      margin-top: pxTvh(16);
      padding: 0 pxTvh(16);
      color: rgba(207, 219, 252, 0.8);
      box-sizing: border-box;
      & > #devicePositionMap {
        width: pxTvw(1168);
        height: pxTvh(657);
      }
      & > .btn-group {
        margin-top: pxTvh(24);
        display: flex;
        justify-content: end;
      }
    }
  }
}

.carditemlist-move,
.carditemlist-enter-active,
.carditemlist-leave-active {
  transition: all 1s ease;
}
.carditemlist-enter-from,
.carditemlist-leave-to {
  opacity: 0;
  transform: translate(-500px, 0px) scale(0);
}
.carditemlist-leave-active {
  position: absolute;
}
.status-box {
  @include elasticFN(flex-start, center);
  & > .online-icon {
    margin-right: pxTvw(8);
    width: pxTvw(8);
    height: pxTvw(8);
    background: #34ad54;
    border-radius: 50%;
  }
  & > .outline-icon {
    margin-right: pxTvw(8);
    width: pxTvw(8);
    height: pxTvw(8);
    background: #a5adba;
    border-radius: 50%;
  }
}
.select-btn-box {
  width: fit-content;
  padding: 0 pxTvw(8);
  height: pxTvh(32);
  line-height: pxTvh(32);
  background: #19284d;
  border-radius: 4px;
  & > .select-btn {
    font-family: PingFang SC, PingFang SC, sans-serif;
    font-weight: 400;
    @include computed_font(14);
    color: #377dff;
    margin-left: pxTvw(16);
    cursor: pointer;
  }
}
</style>

<style lang="scss">
</style>